<template>
	<view>
		<u-navbar back-text="返回" title="选择村庄"></u-navbar>
		<view style="background-color: #07c160; padding: 16px;">
			<view style="color: #ffffff; text-align: center; line-height: 50rpx; font-size: 40rpx;">
				<text v-if="province_select.name">{{province_select.name}}</text>
				<text v-else>村庄分布</text>
			</view>
			<view style="color: #ffffff; text-align: center;line-height: 50rpx;font-size: 18rpx;">
				<text v-if="province_select.name">总数：{{province_select.value}} 占比：{{province_select.percentage}}</text>
				<text v-else>总量：{{totalnumber}}</text>
			</view>
		</view>
		<view style="height: 560rpx">
			<l-echart ref="chart" is-enable></l-echart>
		</view>
		<view style="padding: 18rpx; color:#07c160;">
			<u-icon name="map"></u-icon> <text @click="onGetLocation">获取当前位置</text>
			<!-- <u-icon name="map"></u-icon> <text >请在地图上选择正确的村庄</text> -->
		</view>
		<view style="padding: 18rpx;" v-if="city_select.name">
			当前选择：
			<u-tag v-if="city_select.name" :text="city_select.name" type="success" style="margin-left: 10rpx;"
				@click="onSelectVillage(city_select)" />
			<u-tag v-if="country_select.name" :text="country_select.name" type="success" style="margin-left: 10rpx;"
				@click="onSelectVillage(country_select)" />
			<u-tag v-if="town_select.name" :text="town_select.name" type="success" style="margin-left: 10rpx;"
				@click="onSelectVillage(town_select)" />
		</view>
		<view>
			<u-cell-group>
				<u-cell-item :title="item.name" v-for="(item,index) in list_select" @click="onSelectVillage(item)"
					:key="item.id"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/components/lime-echart/echarts';
	import lEchart from '@/uni_modules/lime-echart/components/lime-echart/'
	export default {
		components: {
			lEchart
		},
		data() {
			return {
				token: '',
				totalnumber: 0,
				provinceData: [],
				province_select: {},
				city_select: {},
				country_select: {},
				town_select: {},
				list_select: [],
				jweixin:{},
				echarts:{},
			}
		},
		onLoad() {
			var that = this;
			if (this.$wechat && this.$wechat.isWechat()) {
				this.jweixin = this.$wechat.share({
					title: "选择村庄",
					desc: "",
					img: this.$unishow + "images/index_banner.jpg"
				},'',{});
			}
		},
		methods: {
			async checkLogin() {
				this.userinfo = uni.getStorageSync('userinfo');
				this.token = this.userinfo.token;
				let res = await this.$api.myRequest({
					url: 'api/index/checklogin',
					header: {
						token: this.token
					}
				});
				console.log(res);
				if (res.data.code == 0) {
					await uni.showModal({
						title: '温馨提示',
						content: '你还没，请先登录',
						success(res) {
							if (res.confirm) {
								// 账户秘密登录
								let url = '/pages/login/login';
								uni.navigateTo({
									url: url
								});
							}
						}
					})
				}
			},
			onSelectVillage(item) {
				console.log(item);
				var that = this;
				if (item.level == 'village') {
					window.location.href = this.$unishow + '/index/village/tovillage?code=' + item.code;
				} else {
					if (item.level == 2) {
						that.city_select = item;
						that.country_select = {};
						that.town_select = {};
					}
					if (item.level == 3) {
						that.country_select = item;
						that.town_select = {};
					}
					if (item.level == 'town') {
						that.town_select = item;
					}

					uni.request({
						url: this.$unishow + 'api/village/selectcity',
						method: 'GET',
						data: item,
						success: res => {
							that.list_select = res.data.list;
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			onGetLocation() {
				var that = this;
				if (this.$wechat && this.$wechat.isWechat()) {
					this.jweixin.getLocation({
						type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
						success: function(res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							that.lng = res.longitude;
							that.lat = res.latitude;
							uni.request({
								url: that.$unishow + 'api/village/getlocation',
								method: 'GET',
								data: {
									lng: that.lng,
									lat: that.lat
								},
								success: res => {
									var provincename = res.data.result.addressComponent.province;
									console.log(provincename);
									console.log(that.provinceData);
									for(let i in that.provinceData){
										if(that.provinceData[i].name == provincename){
											that.province_select = that.provinceData[i];
											that.city_select = {};
											that.country_select = {};
											that.town_select = {};
											// 高亮当前图形
										   that.echarts.dispatchAction({
											   type: 'highlight',
											   seriesIndex: 0,
											   dataIndex: i
										   });
										   that.onSelectVillage(that.province_select);
										}
									}
								},
								fail: () => {},
								complete: () => {}
							});
						}
					});
				} else {
					//获取位置
					uni.getLocation({
						type: 'wgs84',
						success: function(res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							that.lng = res.longitude;
							that.lat = res.latitude;
							uni.request({
								url: that.$unishow + 'api/village/getlocation',
								method: 'GET',
								data: {
									lng: that.lng,
									lat: that.lat
								},
								success: res => {
									var provincename = res.data.result.addressComponent.province;
									console.log(provincename);
									console.log(that.provinceData);
									for(let i in that.provinceData){
										if(that.provinceData[i].name == provincename){
											that.province_select = that.provinceData[i];
											that.city_select = {};
											that.country_select = {};
											that.town_select = {};
											// 高亮当前图形
										   that.echarts.dispatchAction({
											   type: 'highlight',
											   seriesIndex: 0,
											   dataIndex: i
										   });
										   that.onSelectVillage(that.province_select);
										}
									}
								},
								fail: () => {},
								complete: () => {}
							});
						}
					});
				}
			},
		},
		async mounted() {
			var that = this;
			this.$refs.chart.showLoading()
			let res = await this.$api.myRequest({
				url: 'api/village/change',
				header: {
					token: this.token
				}
			});
			this.provinceData = res.data.province;
		
			this.totalnumber = res.data.totalnumber;

			//const data = await this.getData()
			const mapdata = require('@/static/mapData/china.json');
			this.$refs.chart.setChart(chart => {
				chart.hideLoading()
				echarts.registerMap('china', mapdata);
				var data = this.provinceData;
				var yData = [];
				data.sort(function(o1, o2) {
					if (isNaN(o1.value) || o1.value == null) return -1;
					if (isNaN(o2.value) || o2.value == null) return 1;
					return o1.value - o2.value;
				});
				for (var i = 0; i < data.length; i++) {
					yData.push(data[i].name);
				}
				const option = {
					title: {
						show: false,
						text: '全国色阶地图条形图',
						textStyle: {
							fontSize: 30
						},
						x: 'center'
					},
					tooltip: {
						show: true,
						formatter: function(params) {
							return params.name + '：' + params.data['value']
						},
					},
					visualMap: {
						type: 'continuous',
						text: ['111', '222'],
						show: false,
						showLabel: true,
						seriesIndex: [0],
						min: 0,
						max: 80000,
						inRange: {
							color: ['#eeeeee', '#008924', ]
						},
						textStyle: {
							color: '#000'
						},
						bottom: 30,
						left: 'left',
					},
					grid: {
						right: 10,
						top: 80,
						bottom: 30,
						width: '20%'
					},
					xAxis: {
						type: 'value',
						scale: true,
						position: 'top',
						splitNumber: 1,
						boundaryGap: false,
						splitLine: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							margin: 2,
							textStyle: {
								color: '#aaa'
							}
						}
					},
					yAxis: {
						show: false,
						type: 'category',
						nameGap: 16,
						axisLine: {
							show: false,
							lineStyle: {
								color: '#ddd'
							}
						},
						axisTick: {
							show: false,
							lineStyle: {
								color: '#ddd'
							}
						},
						axisLabel: {
							interval: 0,
							textStyle: {
								color: '#999'
							}
						},
						data: yData
					},
					geo: {
						roam: true,
						map: 'china',
						left: '30',
						right: '30',
						top: '20',
						bottom: '20',
						x: 'center',
						layoutSize: '80%',
						label: {
							emphasis: {
								show: false
							}
						},
						itemStyle: {
							emphasis: {
								areaColor: '#fff464'
							}
						},
						regions: [{
							name: '南海诸岛',
							value: 0,
							itemStyle: {
								normal: {
									opacity: 0,
									label: {
										show: false
									}
								}
							}
						}],
					},
					series: [{
						name: 'mapSer',
						type: 'map',
						roam: false,
						geoIndex: 0,
						label: {
							show: false,
						},
						data: data
					}]
				};
				console.log('aaaaaaaaaaaaa');
				chart.setOption(option);
				chart.on('click', function(params) {
					console.log(params);
					that.province_select = params.data;
					uni.request({
						url: that.$unishow + 'api/village/selectcity',
						method: 'GET',
						data: {
							codeid: params.data.codeid
						},
						success: res => {
							that.city_select = {},
								that.country_select = {},
								that.town_select = {},
								that.list_select = res.data.list;
						},
						fail: () => {},
						complete: () => {}
					});
				});
				that.echarts = chart;
				return chart;
			})
			setTimeout(()=>{
				for(let i in that.provinceData){
					if(that.provinceData[i].name == '河南省'){
						that.province_select = that.provinceData[i];
						that.city_select = {};
						that.country_select = {};
						that.town_select = {};
						// 高亮当前图形
					   that.echarts.dispatchAction({
						   type: 'highlight',
						   seriesIndex: 0,
						   dataIndex: i
					   });
					   that.onSelectVillage(that.province_select);
					}
				}
			},500)
		
		},
	}
</script>

<style>

</style>
